<template>
  <div class="userProfile">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
      class="page-nav-bar"
    />
    <van-cell title="头像" is-link @click="$refs.file.click()"
      ><van-image
        width="30"
        height="30"
        fit="cover"
        round
        :src="userProfile.photo"
    /></van-cell>

    <!-- input.file -->
    <input type="file" hidden ref="file" @change="changeAvatar" />

    <van-cell
      title="昵称"
      :value="userProfile.name"
      is-link
      @click="namePupShow = true"
    ></van-cell>
    <van-cell
      title="性别"
      :value="isSex(userProfile.gender)"
      is-link
      @click="genderPupShow = true"
    ></van-cell>
    <van-cell
      title="生日"
      :value="userProfile.birthday"
      is-link
      @click="birthdayPupShow = true"
    ></van-cell>

    <!-- 昵称弹出层 -->
    <van-popup
      class="pop"
      v-model="namePupShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <name @close="namePupShow = false" v-model="userProfile.name"></name>
    </van-popup>

    <!-- 性别弹出层 -->
    <van-popup
      class="pop"
      v-model="genderPupShow"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <gender
        v-model="userProfile.gender"
        @close="genderPupShow = false"
      ></gender>
    </van-popup>

    <!-- 生日弹出层 -->
    <van-popup
      class="pop"
      v-model="birthdayPupShow"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <birthday
        @close="birthdayPupShow = false"
        v-model="userProfile.birthday"
      ></birthday>
    </van-popup>

    <!-- 头像弹出层 -->
    <van-popup
      class="pop"
      v-model="avatarPupShow"
      position="bottom"
      :style="{ height: '100%' }"
      closeable
    >
      <photo
        v-if="avatarPupShow"
        @close="avatarPupShow = false"
        :imgURL="imgURL"
        @updatePhoto="userProfile.photo = $event"
      ></photo>
    </van-popup>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'

import Name from './components/name'
import Gender from './components/gender'
import Birthday from './components/birthday'
import Photo from './components/photo'

export default {
  name: 'UserProfile',
  components: {
    Name,
    Gender,
    Birthday,
    Photo
  },
  props: {},
  data() {
    return {
      userProfile: {},
      namePupShow: false,
      genderPupShow: false,
      birthdayPupShow: false,
      avatarPupShow: false,
      imgURL: null
    }
  },
  created() {
    this.getUserInfo()
  },
  mounted() {},
  activited() {},
  update() {},
  beforeRouteUpdate() {},
  methods: {
    async getUserInfo() {
      try {
        const { data } = await getUserInfo()
        // console.log(data)
        this.userProfile = data.data
      } catch (error) {
        this.$toast.fail('失败')
      }
    },

    // 判断得到性别
    isSex(n) {
      if (n === 1) {
        return '女'
      }
      if (n === 0) {
        return '男'
      }
      return '暂无'
    },

    // changeAvatar 头像选取改变事件
    changeAvatar() {
      // 图片选取后,拿到本地url
      const file = this.$refs.file.files[0]
      const imgURL = URL.createObjectURL(file)
      // console.log(imgURL)

      // 将url传递给子组件
      // 先传递给data
      this.imgURL = imgURL
      // 打开弹出层
      this.avatarPupShow = true
      // 清空input.file的value,否则选取同一张图片不会触发事件
      this.$refs.file.value = ''
    }
  },
  filter: {},
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.userProfile,
.pop {
  background: #f5f7f9;
}
</style>
